<template>
  <div>
    <div class="m-list-box"  v-for="item in parcel.listData">
      <div :class="['list-head','clrfix',item.status]">
        <div class="session">
          <div class="num">{{item.show_row}}</div>
          <div class="detail">
            <span class="time">{{item.show_time}}</span>
            <span class="status">{{item.show_status}}</span>
            <span class="is_test" v-if="item.is_test">测试场</span>
          </div>
        </div>
        <ul class="player-list">
          <li v-for="figuer in item.person">
            <img class="photo" :src="[figuer.id?'//47.105.198.61:8080/'+figuer.id+'.png':defaultHeadImg]" alt="">
            <p class="role">{{figuer.role}}</p>
            <p class="name">{{figuer.id}}</p>
          </li>

        </ul>
      </div>
      <div class="list-content">
        <div class="content-warning"  v-if="item.is_abnormal">
          <i class="el-icon-warning"></i>
          <span class="warning-text">场次人数与预订人数不一致</span>
        </div>
        <div class="content-total">
          <div class="total-list">
            <em class="title">本场收入</em>
            <em class="price"><i class="yen">￥</i>{{item.total}}</em>
          </div>
          <div class="total-list">
            <em class="title">支付总额</em>
            <em class="price"><i class="yen">￥</i>{{item.pay}}</em>
          </div>
          <div class="total-list">
            <em class="title">开场后退款</em>
            <em class="price"><i class="yen">￥</i>{{item.refund}}</em>
          </div>

        </div>
        <div class="content-table">
          <el-table :data="item.channel"  resizable="resizable" @header-dragend="headerDragend" style="width: 100%" header-row-class-name="table-header" border :header-cell-style="headStyle" :cell-style="cellStyle" :span-method="objectSpanMethod" v-loading="loading">
            <el-table-column width="90" prop="name" label="支付渠道" resizable="resizable">
            </el-table-column>
            <el-table-column width="90" prop="total" class-name="price-style" label="支付金额" resizable="resizable">
              <template slot-scope="scope">
                <span style="color: #FF679E"><i class="yen">￥</i>{{scope.row.total}}</span>
              </template>
            </el-table-column>
            <el-table-column width="" prop="note" label="备注" resizable="resizable">
              <template slot-scope="scope">
                <div v-for="noteItem in scope.row.note">{{noteItem}}</div>
              </template>
            </el-table-column>
            <el-table-column width="90"  label="操作" resizable="resizable">
              <template slot-scope="scope">
                <el-button type="danger" size="mini"  plain @click="edit(item,scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="content-tips clrfix" v-if="item.remarks">
          <div class="tips-title">场次备注</div>
          <div class="tips-content">{{item.remarks}}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
    import defaultHeadImg from  "@/assets/imgs/no-head.png"
    export default {
      name: "list",
      component:{},
      props:["parcel"],
      data() {
        return {
          defaultHeadImg:defaultHeadImg,
          cellStyle:{
            "color":"#000",
            "fontSize":"14px"
          },
          resizable:false,
          tableData: [
            {
              channel: "乐惠",
              price: "￥1244",
              note: "¥368×2人 [支付码 1256] ￥368×2人 [支付码 1256]"
            },
            {
              channel: "大众点评",
              price: "￥1244",
              note: "¥368×2人 [支付码 1256] ￥368×2人 [支付码 1256]"
            },
            {
              channel: "现金支付",
              price: "￥1244",
              note: "¥368×2人 [支付码 1256] ￥368×2人 [支付码 1256]"
            }
          ],
          loading:true

        }
      },

      methods: {
        headStyle(){
          return 'background: #F2F2F2;font-size: 14px;color: #9E9E9E;'
        },
        edit(item,row){
          this.$emit('upload',{item,row});
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }){
          if(columnIndex == 3 ){
            if(rowIndex == 0){
              return{
                rowspan: 7,
                colspan:1
              }
            } else {
              return{
                rowspan: 0,
                colspan:1
              }
            }
          }
        },
        headerDragend(newWidth, oldWidth, column, event){
          event.preventDefault();
          column.resizable = false;
          return false;
        }
      },
      updated(){
        if(this.parcel.listData && this.parcel.listData.length){
          this.loading = false
        }
      },
      mounted(){

      }

    }
</script>

<style scoped lang = "scss">
  .m-list-box{
    /*box-shadow: 0 1px 8px 0 rgba(0,0,0,0.15);*/
    border-radius:3px ;
    overflow: hidden;
    margin-top:30px;

  }
  .list-head{
    .session{
      float: left;
      padding:20px;
      font-size:0;
      color: #FFFFFF;
      .num{
        font-family: PingFangSC-Medium;
        font-size: 42px;
        letter-spacing: 0;
        line-height: 59px;
        display: inline-block;
        margin-right:13px;
      }
      .detail{
        display: inline-block;
        padding:10px 0;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        width: 85px;
      }
      .is_test{
        background: #F8E71C;
        border-radius: 4px;
        font-family: PingFangSC-Regular;
        font-size: 11px;
        color: #000000;
        letter-spacing: 0;
        padding:2px 5px;
      }
    }
    .player-list{
      float: right;
      font-size: 0;
      margin:15px 10px;
      li{
        width:80px;
        text-align: center;
        font-size: 10px;
        color: #FFFFFF;
        display: inline-block;
        margin-right:10px;
      }
      .photo{
        background: #9B9B9B;
        border: 1px solid #FFFFFF;
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 2px;
        width:35px;
        height: 35px;
        display: inline-block;
      }

    }
  }
  /*已开始*/
  .opening{
    background: #697EF4;
  }
  /*已结束*/
  .end{
    background: #FC8B61;
  }
  /*已过期*/
  .expired{
    background: #666666;
  }
  /*未开始*/
  .not_open{
    background: #FF679E;
  }

  .list-content{
    background: #fff;
    padding-bottom:30px;
  }
  .content{
    &-warning{
      background: #FFFDDF;
      text-align: center;
      color: red;
      line-height: 20px;
    }
    &-total{
      margin:0 30px 20px;
      font-size: 0;
      padding-top: 20px;
      .total-list{
        display: inline-block;
        margin-right:60px;
        font-family: PingFangSC-Regular;
        letter-spacing: 0;
        vertical-align: top;
        em{
          display: block;
        }
        .title{
          font-size: 12px;
          color: #9E9E9E;
          line-height: 17px;
        }
        .price{
          font-size: 24px;
          color: #FF679E;
          text-align: center;
          line-height: 33px;
        }
        .yen{
          font-size: 14px;
        }
        .reason{
          font-size: 12px;
          color: #000000;
          line-height: 33px;

        }
      }
    }
    &-table{
      margin:36px 150px 20px 15px;
      /*border: 1px solid rgba(151,151,151,0.15);*/
      th{
        background: #F2F2F2;
      }
      tr{
        background: #F2F2F2;
      }
    }
    &-tips{
      padding:0 15px;
      position: relative;
      min-height:60px;
      .tips-title{
        width:60px;
        height:60px;
        background: #FFED8C;
        border-radius: 3px;
        font-size: 20px;
        color: #000000;
        padding:10px;
        line-height: 1;
        box-sizing: border-box;
        position: absolute;
      }
      .tips-content{
        padding-left: 80px;
      }
    }
  }

</style>
